<template>
  <el-container style="height: 100vh;">
    <!-- 侧边栏 -->
    <el-aside width="150px" style="background-color: #EFEFEF;">
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#EFEFEF"
          text-color="#000000"
          active-text-color="#ffd04b"
      >
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span>Dashboard</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <router-link to="/student">学生管理</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span>教师管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-user"></i>
          <router-link to="/course">课程管理</router-link>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部导航栏 -->
      <el-header style="background-color: #409EFF; color: #fff; line-height: 60px;">
        <span>学校后台管理系统</span>
        <el-dropdown style="float: right;">
          <img
              :src="user.icon"
              @error="handleImageError"
              style="width: 50px; height: 50px; border-radius: 50%;"
          />
          <span class="el-dropdown-link">
            {{ user.nickname }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link style="color:#000000;margin-left:100px" to="/update">修改个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      user: {}
    };
  },
  mounted() {
    // 页面挂载之后，读取用户信息，转换为对象
    const userData = localStorage.getItem('user');
    if (userData) {
      this.user = JSON.parse(userData);
      if (!this.user.icon) {
        this.user.icon = 'https://example.com/default-avatar.png'; // 默认头像
      }
    } else {
      console.error('No user data found in localStorage');
    }
  },
  methods: {
    handleImageError(event) {
      event.target.src = 'https://example.com/default-avatar.png'; // 默认头像
    }
  }
};
</script>

<style>
.el-header {
  background-color: #EFEFEF;
  color: #fff;
  line-height: 60px;
}

.el-aside {
  color: #FFF;
}
</style>